<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/base.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .body-content {
            display: block;
            background-color: #fff;
            min-width: 1600px;
            min-height: 1200px;
            margin: auto;
            margin-top: 10px;
            width: 98%;
            height: 98vh;
        }
        .piece {
            border: 1px solid #8a8a8a;
            margin-left: 10px;
            display: inline-block;
        }

        .piece .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: rgba(118, 162, 6, 1);
            border: 1px solid rgba(138, 138, 138, 1);
            text-align: center;
            color: #fff;
            font-size: 19px;
        }

        .piece .content ul {
            margin: 0px;
            padding: 0px;
            display: inline-block;
        }

        .piece .content ul li {
            width: 100%;
            list-style: none;
            display: block;
            height: 35px;
            border-bottom: 1px solid #000;
        }

        .piece .content ul li:nth-last-child(1) {
            border: none;
        }

        .piece .content ul li span {
            width: 120px;
            text-align: center;
            color:#fff;
            /* background: rgba(138, 138, 138, 1); */
            background-color: #fff;
            color:#000;
            display: inline-block;
            height: 35px;
            line-height: 36px;
            padding-right: 10px;
            padding-left: 10px;
        }
        .piece .content ul li input {
            text-indent: 10px;
            border: none;
            width: 160px;
            height: 33px;
            line-height: 33px;
            padding: 0px;
            margin: 0px;
        }

        .piece .content ul li select {
            display: inline-block;
            text-indent: 10px;
            border: none;
            background: none;
            width: 160px;
            height: 35px;
            line-height: 35px;
            padding: 0px;
            margin: 0px;
        }

        .material {
            position: absolute;
            top: 36px;
            left: 20px;
        }
        
        .waste{
            position: absolute;
            top: 36px;
            left: 160px;
        }

        .amount{
            position: absolute;
            top: 36px;
            left: 320px;
        }

        .pale{
            position: absolute;
            top: 36px;
            left: 480px;
        }

        .loss{
            position: absolute;
            top: 36px;
            left: 640px;
        }
        
        .price{
            position: absolute;
            top: 36px;
            left: 800px;
        }

        .price2{
            position: absolute;
            top: 36px;
            left: 960px;
        }

        .button {
            background: rgba(0, 176, 80, 1);
            color: #fff;
            position: absolute;
            top:280px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
        }
        .button-save{
            left:30px;
        }
    </style>
  </head>
  
  <body>
    <div class="body-content">
        <!-- <form class="layui-form"> -->
        <div class="piece material">
            <div class="title">
                材质
            </div>
            <div class="content">
                <ul id="material"></ul>
            </div>
        </div>
        <div class="piece waste">
            <div class="title">
                废料单价
            </div>
            <div class="content">
                <ul id="waster"></ul>
            </div>
        </div>
        <div class="piece amount">
            <div class="title">
                原钢切费
            </div>
            <div class="content">
                <ul id="amount"></ul>
            </div>
        </div>
        <div class="piece pale">
            <div class="title">
                利润比例
            </div>
            <div class="content">
                <ul id="pale"></ul>
            </div>
        </div>
        <div class="piece loss">
            <div class="title">
                锻打损耗
            </div>
            <div class="content">
                <ul id="loss"></ul>
            </div>
        </div>
        <div class="piece price">
            <div class="title">
                圆钢价格(不含税)
            </div>
            <div class="content">
                <ul id="price"></ul>
            </div>
        </div>
        <div class="piece price2">
            <div class="title">
                圆钢价格(含税)
            </div>
            <div class="content">
                <ul id="price2"></ul>
            </div>
        </div>
        <a href="javascript:save();" class="button-save button">修改信息</a>
        <!-- <a href="javascript:app();" class="button-app button">提交应用</a> -->
        <!-- </form> -->
    </div>
    <script>
        initialization();
        function initialization(){
            console.log(material_value);
            let string = '',index = '';
            for(index in material_value)
                string += '<li><span>' + index + '</span></li>';
            document.getElementById('material').innerHTML = string;
            string = '';
            for(index in material_value)
                string += '<li><input name="feiliao_amount" value="' + material_value[index].feiliao_amount + '"></li>';
            document.getElementById('waster').innerHTML = string;
            string = '';
            for(index in material_value)
                string += '<li><input name="amount" value="' + material_value[index].amount + '"></li>';
            document.getElementById('amount').innerHTML = string;
            string = '';
            for(index in material_value)
                string += '<li><input name="pale" value="' + material_value[index].pale + '"></li>';
            document.getElementById('pale').innerHTML = string;
            string = '';
            for(index in material_value)
                string += '<li><input name="loss" value="' + material_value[index].loss + '"></li>';
            document.getElementById('loss').innerHTML = string;
            string = '';
            for(index in material_value)
                string += '<li><input name="price" value="' + material_value[index].price + '"></li>';
            document.getElementById('price').innerHTML = string;
            string = '';
            for(index in material_value)
                string += '<li><input name="price2" value="' + material_value[index].price2 + '"></li>';
            document.getElementById('price2').innerHTML = string;
        }
        function save(){
            let index = '',i = 0;
            let feiliao_amount = document.getElementsByName('feiliao_amount'),
                amount = document.getElementsByName('amount'),
                pale = document.getElementsByName('pale'),
                loss = document.getElementsByName('loss'),
                price = document.getElementsByName('price'),
                price2 = document.getElementsByName('price2');
            for(index in material_value){
                material_value[index].feiliao_amount = feiliao_amount[i].value;
                material_value[index].amount = amount[i].value;
                material_value[index].pale = pale[i].value;
                material_value[index].loss = loss[i].value;
                material_value[index].price = price[i].value;
                material_value[index].price2 = price2[i].value;
                i++;
            }
            $.ajax({
                url: '/admin/my/material_value', // 你的 PHP 脚本的 URL
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data: material_value,
                success: function(res) { 
                    if (res.code == 200){
                        alert("成功");
                    }
                }
            });
        }
    </script>
  </body>
</html>